
    <div class="am-demo-page">
      <div style="padding: 15px;font-size: 16px; color:#000">Basic</div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Money input</div>
        <div class="am-list-body">
          <InputItem
            [type]="'money'"
            [clear]="true"
            [placeholder]="'start from left'"
            [moneyKeyboardAlign]="'left'"
            [content]="'光标在左'"
          >
          </InputItem>
          <InputItem
            [type]="'money'"
            [clear]="true"
            [placeholder]="'start from rigth'"
            [content]="'光标在右'"
          ></InputItem>
          <InputItem
            [type]="'money'"
            [clear]="true"
            [placeholder]="'money format'"
            [focus]="numberFocus"
            [content]="'数字键盘'"
          >
          </InputItem>
          <div class="am-list-item am-list-item-middle">
            <div class="am-list-line">
              <div class="am-list-content" style="width:100%;color:#108ee9;text-align:center" (click)="clickFocus()">
                click to focus
              </div>
            </div>
            <div class="am-list-ripple" style="display: none;"></div>
          </div>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Customize to focus</div>
        <div class="am-list-body">
          <InputItem [clear]="true" [placeholder]="'auto focus'" [focus]="autoFocus" [content]="'标题'"></InputItem>
          <InputItem
            [clear]="true"
            [placeholder]="'click the button below to focus'"
            [focus]="inputFocus"
            [content]="'标题'"
          >
          </InputItem>
          <div class="am-list-item am-list-item-middle">
            <div class="am-list-line">
              <div
                class="am-list-content"
                style="width:100%;color:#108ee9;text-align:center"
                (click)="clickFocusInput()"
              >
                click to focus
              </div>
            </div>
            <div class="am-list-ripple" style="display: none;"></div>
          </div>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Click label to focus input</div>
        <div class="am-list-body">
          <InputItem [placeholder]="'Click label to focus input'" [focus]="titleFocus" [content]="contentlabel">
            <ng-template #contentlabel>
              <span (click)="clickTitle()">标题</span>
            </ng-template>
          </InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Show clear</div>
        <div class="am-list-body">
          <InputItem [clear]="true" [placeholder]="'displayed clear while typing'" [content]="'标题'"></InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Number of words for the title</div>
        <div class="am-list-body">
          <InputItem
            [clear]="true"
            [labelNumber]="5"
            [placeholder]="'limited title length'"
            [content]="'标题过长超过5个字符'"
          >
          </InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Custom title（text / image / empty)</div>
        <div class="am-list-body">
          <InputItem [placeholder]="'no label'"></InputItem>
          <InputItem [placeholder]="'title can be icon，image or text'" [content]="content">
            <ng-template #content>
              <div
                style="background-image:url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png); background-size:cover;height:22px; width: 22px "
              ></div>
            </ng-template>
          </InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Customize the extra content in the right</div>
        <div class="am-list-body">
          <InputItem [placeholder]="'0.00'" [extra]="'¥'" [content]="'价格'"></InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Format</div>
        <div class="am-list-body">
          <InputItem [type]="'bankCard'" [defaultValue]="'8888 8888 8888 8888'" [content]="'银行卡'"></InputItem>
          <InputItem
            [type]="'phone'"
            [placeholder]="'186 1234 1234'"
            (onChange)="inputChange($event)"
            [content]="'手机号码'"
          >
          </InputItem>
          <InputItem [type]="'password'" [placeholder]="'****'" [content]="'密码'"></InputItem>
          <InputItem
            [type]="'number'"
            [placeholder]="'click to show number keyboard'"
            [content]="'数字键盘'"
          ></InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Not editable / Disabled</div>
        <div class="am-list-body">
          <InputItem [editable]="false" [value]="'not editable'" [content]="'姓名'"></InputItem>
          <InputItem [disabled]="true" [value]="'style of disabled InputItem'" [content]="'姓名'"></InputItem>
        </div>
      </div>
      <div class="am-list" style="margin:0;">
        <div class="am-list-header">Confirm when typing</div>
        <div class="am-list-body">
          <InputItem
            [type]="'phone'"
            [placeholder]="'input your phone'"
            [value]="value"
            [error]="error"
            [content]="'手机号码'"
            (onErrorClick)="inputErrorClick($event)"
            (onChange)="inputChange($event)"
          >
          </InputItem>
        </div>
      </div>
    </div>
  